<template>
  <MainContent title="任务管理" back>
    <template #search-bar>
      <SearchBar inline>
        <template #normal>
          <el-form-item label="任务名称">
            <el-input v-model="tableForm.taskName" clearable placeholder="请输入任务名称"></el-input>
          </el-form-item>
          <el-form-item label="任务分类">
            <el-select v-model="tableForm.category" placeholder="请选择任务分类">
              <el-option v-for="item in taskCategoryList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="任务状态">
            <el-select v-model="tableForm.status" placeholder="请选择任务状态">
              <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="primary" @click="showTaskExport = true">新增任务</el-button>
          </el-form-item>
        </template>

      </SearchBar>
    </template>
    <LayoutTable ref="marketingModel" url="/community/back/dailyTask/pageTask" :setSearch="setSearch" disable-auto-height
      :param="tableForm">
      <el-table-column prop="taskName" label="任务名称" min-width="150"></el-table-column>

      <el-table-column prop="category" label="任务分类" min-width="100">
        <template #default="scope">
          <div>
            {{ taskCategoryObj[scope.row.category] }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="taskCode" label="任务编码" min-width="100"></el-table-column>
      <el-table-column prop="taskUrl" label="跳转链接" min-width="100"></el-table-column>
      <el-table-column prop="status" label="任务状态" min-width="100">
        <template #default="scope">
          <el-switch :value="scope.row.status" :active-value="1" :inactive-value="0" @click="setStatus(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="操作时间" min-width="100">
        <template #default="scope">
          <div>
            {{ $filters.dateFormat(scope.row.updateTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="journeyStrategyNum" label="操作" width="150">
        <template #default="scope">
          <div>
            <el-button @click="toEdit(scope.row)" link type="primary">编辑</el-button>
          </div>
        </template>
      </el-table-column>

    </LayoutTable>
    <Add-Task :showTaskExport="showTaskExport" :modelData="modelData" @confirm="confirm" @cancel="cancel"></Add-Task>
  </MainContent>
</template>
<script>
export default {
  name: 'TaskManag'
}
</script>
<script setup>
import integralApi from "@/api/integralApi.js";
import AddTask from "./component/addTask.vue";
import MarketingModelApi from "@/api/marketingModelApi.js";
import { dateFormat } from "@/utils/filters";
const tableForm = ref({
  taskName: "",
  category: null,
  status: null,
});
const statusList = ref([
  { name: '全部', id: null },
  { name: '启用', id: 1 },
  { name: '禁用', id: 0 },
])
const taskCategoryList = ref([
  { name: '全部', id: null },
  { name: '打卡任务', id: 1 },
  { name: '企微任务', id: 2 },
  { name: '业绩任务', id: 3 },
])
const taskCategoryObj = ref({
  1: '打卡任务',
  2: '企微任务',
  3: '业绩任务',
})

const modelData = ref({ id: null })
const setSearch = ref(Number());
const showTaskExport = ref(false)
const marketingModel = ref();
const setStatus = (row) => {
  console.log('row', row)
  ElMessageBox.confirm(
    '是否修改状态',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'Warning',
    }
  )
    .then(() => {
      setAvailable(row)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消操作',
      })
    })
}
const toEdit = (row) => {
  modelData.value = JSON.parse(JSON.stringify(row))
  showTaskExport.value = true
}
// 修改状态
const setAvailable = async (row) => {
  let rs = await integralApi.setAvailable({ id: row.id, name: row.taskName })
  if (rs.code === 200) {
    ElMessage({
      message: '修改状态成功',
      type: 'success',
    })
    onSearch()
  }

}
const confirm = () => {
  onSearch();
  cancel()
};
const cancel = () => {
  showTaskExport.value = false;
  modelData.value = { id: null }
  setTimeout(() => {
  }, 500);
};
const onSearch = () => {
  setSearch.value++;
};

const store = useStore();
// 监听机构
const insId = computed(() => {
  return store.state.insId.insId;
});
watch(
  () => insId,
  () => {
    onSearch();
  },
  {
    deep: true
  }
)
</script>

<style lang="scss" scoped></style>
